<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />

		<style type="text/css">
			.bg-blue1 {
				position: absolute;
				right: 10px;
				top: 8px;
				width: 85px;
				height: 25px;
				font-size: 14px;
				overflow: hidden;
				display: block;
				float: right;
				line-height: 25px;
				border: 1px solid #3AB3FF;
				border-radius: 5px;
				color: #3AB3FF;
				background-color: #efeff4;
			}
			
			.color-1 {
				color: #3AB3FF;
				font-size: 14px;
				font-weight: 600;
				padding-bottom: 5px;
				height: 35px;
				line-height: 35px;
			}
			
			.fastlogin {
				font-size: 18px;
				margin-top: 20px;
				display: inline-block;
				margin-bottom: 20px;
			}
			
			.fastlogin:after {
				position: absolute;
				right: 13px;
				top: 30px;
				height: 1px;
				width: 20%;
				background-color: #c0c0c0;
				display: block;
				content: "";
				clear: both;
			}
			
			.fastlogin:before {
				position: absolute;
				left: 15px;
				top: 30px;
				height: 1px;
				width: 20%;
				background-color: #c0c0c0;
				display: block;
				content: "";
				clear: both;
			}
			
			.color-qq {
				background-color: #007AFF;
				color: #FFFFFF;
				border-radius: 50%;
				width: 50px;
				height: 50px;
				line-height: 50px;
			}
			
			.color-weixin {
				background-color: #1AAD19;
				color: #FFFFFF;
				border-radius: 50%;
				width: 50px;
				height: 50px;
				line-height: 50px;
			}
			
			.color-weibo {
				background-color: #E81010;
				color: #FFFFFF;
				border-radius: 50%;
				width: 50px;
				height: 50px;
				line-height: 50px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav header-bg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">登录</h1>
		</header>
		<div class="mui-content">
			<div class="mui-row">
				<div class="mui-card">
					<div class="mui-input-row mui-icon mui-icon-person mui-left" style="padding: 5px;" id="user">
						<input placeholder="请输入手机号" type="person" class="mui-input-clear mui-input" name="test" style="border: none;">
					</div>
				</div>
				<div class="mui-card">
					<div class="mui-input-row mui-icon mui-icon mui-icon-locked mui-left" style="padding: 5px;" id="password">
						<input placeholder="验证码" type="person" class="mui-input-clear mui-input" name="test" style="border: none;">
					</div>
					<div class="bg-blue1 mui-text-center">
						获取验证码
					</div>
				</div>
				<div class="mui-col-xs-6 mui-col-sm-6 color-1 mui-text-center">
					<input name="checkbox" value="" type="checkbox">《飞机驾考协议》
				</div>
				<div class="color-1 mui-col-xs-6 mui-text-right">
					无法收到验证码？
				</div>
				<button id="submitBtn" class="mui-col-xs-11 mui-col-sm-11 mui-btn btn-blue" type="button" style="margin-left: 18px;">登录</button>

				<div class="mui-text-center mui-col-xs-12">
					<span class="fastlogin">三方账户快速登录</span>
				</div>
				<div class="mui-row">
					<div class="mui-col-xs-4 mui-col-sm-4 mui-text-center">
						<div class="mui-icon mui-icon-qq color-qq"></div>
						<div class="color-size">QQ登录</div>
					</div>
					<div class="mui-col-xs-4 mui-col-sm-4 mui-text-center">
						<div class="mui-icon mui-icon-weixin color-weixin"></div>
						<div class="color-size">微信登录</div>
					</div>
					<div class="mui-col-xs-4 mui-col-sm-4 mui-text-center">
						<div class="mui-icon mui-icon-weibo color-weibo"></div>
						<div class="color-size">微博登录</div>
					</div>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<!--<script type="text/javascript" src="js/zepot.js"></script>-->
		<script src="js/public.js"></script>
		<script type="text/javascript">
			mui.init()
			mui.ready(function(){
				var sub=document.getElementById("submitBtn");
				sub.addEventListener('tap', function() {
					mui.ajax('http://192.168.0.16/Admin/ashx/Login.ashx', {
						data: {
							username: 'admin',
							password: 'admin'
						},
						dataType: 'json', 
						type: 'post', 
						timeout: 10000, 
						success: function(res) {

							if(res.code==200){
								
							}else{
								
							}
							console.log(JSON.stringify(res));
						},
						error: function(xhr, type, errorThrown) {
							//异常处理；
							console.log(JSON.stringify(xhr));
							console.log(type);
							console.log(errorThrown);
						}
					});
				})
			})
		</script>
	</body>

</html>